@import 'common';


$w: 100%;

//伪元素三角形
@mixin tirange_left($border-color: skyblue transparent transparent skyblue) {
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border: 1px solid;
    border-width: 20px 9px;
    border-color: $border-color;
    border-width: 19px 9px;
    position: absolute; 
}



//内容
.project {

    main {
        .main_top{
            @extend %main_top;
        }
        
        .main_content {
            width: 751px;
            
            margin: 0 auto;

            //公司标题
            .companytext {
                margin-top: 48px;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 38px;
                p:nth-child(1) {
                    font-size: 18px;
                }

                p:nth-child(2) {
                    //TODO
                    font-size: 10px;
                }

                //横线
                .line {
                    margin-top: 10px;
                    width: 200px;
                    height: 1px;
                    border-top: 2px solid skyblue;
                }
            }

            //ul部分
            .information_ul {
                //width: &w;
                text-align: center;

                li {
                    
                    margin-top: 30px;
                    //顶部标题
                    .li_top {
                        height: 38px;
                        width: 100%;
                        border-top: 1px solid skyblue;
                        position: relative;
                        margin-bottom: 30px;
                        box-sizing: border-box;
                        p:nth-child(1) {
                            font-size: 16px;
                        }
                    
                        p:nth-child(2) {
                            transform: scale(0.7);
                        }
                    
                        //伪元素三角形
                        //@extend &：before
                        &::before {
                            @include tirange_left;
                            left: 0;
                        }
                    
                        &::after {
                            @include tirange_left(skyblue skyblue transparent transparent);
                            right: 0;
                            top: -1px;
                        }
                    }
                    //内容
                    .li_content{
                        .li_text{
                            font-size: 12px;
                            margin: 19px 0 14px;
                            
                            line-height: 30px;
                            text-align: left;
                        }
                        img{
                            width: 751px;
	                        height: 458px;
                        }
                    }
                    .li_buttom{
                        height: 38px;
                        width: &w;
                        border-bottom: 1px solid skyblue;
                        position: relative;
                        margin-top: 22px;
                        overflow: hidden;
                        box-sizing: border-box;
                        p:nth-child(1) {
                            font-size: 16px;
                        }
                    
                        p:nth-child(2) {
                            font-size: 9px;
                        }
                    
                        //伪元素三角形
                        //@extend &：before
                        &::before {
                            @include tirange_left(transparent transparent skyblue skyblue);
                            left: 0;
                            top: 1px;
                        }
                    
                        &::after {
                         @include tirange_left(transparent skyblue skyblue transparent);
                            right: 0;
                            top: 1px;
                        }
                    
                    }
                    //底部 文字+图片
                    .li_footer{
                        margin-top: 30px;
                        .li_text{
                            line-height: 21px;
                            font-size: 12px;
                            margin-bottom: 16px;
                            text-align: left;
                            letter-spacing: 0px;
                        }
                        img{
                            width: 752px;
	                        height: 424px;
                        }
                    }
                }
                li:nth-child(1)> .li_content >.li_text{
                    font-size: 14px;
                    text-indent: 2em;
                }
                li:nth-child(3)> .li_footer >.li_text{
                    margin-left: 200px;
                    
                }
            }
            .page_ul{
                text-align: center;
                margin: 20px;
                li{
                    display: inline-block;
                    margin: 10px;
                }
            }
        }
    }
}